<!DOCTYPE html>
<html>
    <head>
        <!-- 当前文档的字符集编码为utf-8 -->
        <meta charset="utf-8">
        <meta name = "author" content="wyrQF">
        <meta name="keywords" content="CGI开发 H5模版 千锋教育 西安物联网">
        <title>HTML5模版-主页</title>
        <!-- 引入外联样式 -->
        <link rel="stylesheet" href="/css/my.css">
        <style>
           /* 属性选择器 ，语法  [属性] {}   
                        或者  [属性=属性值] {}*/ 
            input{
                margin: 10px;
            }
            [type]
            {
                color: salmon;
                margin: 10px;
            }
            /* 两个选择器组合到一起就是群组选择器 */
            [type=password],[type=text]
            {
                outline: none;
                border: 1px dashed;
                background-color: aquamarine;
            }
            /* :hover 伪类选择器，鼠标悬浮在标签上时的样式 */ 
            [type=password]:hover{
                padding: 10px;
                border: 1px solid blue;
            }
            /* :focus 标签获取焦点时的样式 
                outline 是input的外边框
                border 是input的内边框 （默认的）
            */
            [type=text]:focus{
                font-size: 20px;
                outline: 1px solid red;
            }
            /* :active 激活标签 （点击或者按下鼠标）的样式，针对a,button */
            a:active{
                color: skyblue;
            }
            button:hover{
                background-color: firebrick;
                border: none;
            }
            button:active{
                background-color: greenyellow;
            }
            /* p>b 获取所有p下的直接子标签b，有3个，
                :last-child 表示指定最后一个字标签的效果
            */ 
            p>b:last-child{
                color: rgb(249, 53, 53);
            }
            p>b:first-child{
                color: rgb(65, 156, 236);
            }
            /* :nth-child(3) 表示p>b第3个子标签的样式 */ 
            p>b:nth-child(3){
                background-color: red;
                color: cadetblue;
            }
        </style>
    </head>
    <body>
        <input type="text">
        <br>
        <input type="password">
        <br>
        <input type="checkbox">男
        <br>
        <input type="checkbox">女
        <hr>
        <a href="css1.html">样式来源（三个）</a>
        <br>
        <button type="button" >按钮</button>
        <p><b>1</b><b>2</b><b>2</b><b>2</b><b>3</b></p>
    </body>
</html>
